<!DOCTYPE html>
<html lang="en" data-ng-app="carmensdApp">
<head>
	<meta charset="ISO-8859-1">
	<title>Carmen Sandiego</title>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<script	src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script> 
	<script src="js/angular.js"></script>	
	<link rel="stylesheet" href="css/styles.css">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
</head>

<body data-ng-controller="CarmenSandiegoAppModel">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-xs-offset-1 left-panel shadow">
				<div class="country-banner">
					<div class="country-name text-center">
						<h1>{{paisActual.nombre}}</h1>
					</div>
					<img src="images/ciudad_.png">
				</div>
				<div class="tab-content info">
					<div class="tab-pane avion">
						<img src="images/avion.gif">
					</div>
					<div class="tab-pane active inicio" id="inicio-tab">
							<img src="images/carmen.jpg">
					</div>
					<div class="tab-pane" id="{{lugar.nombreTipoLugar}}" data-ng-repeat="lugar in paisActual.lugares">
						<h3>Visitando: {{lugar.nombreTipoLugar}}</h3>
						<ul class="pistas">
							<li data-ng-repeat="pista in lugar.ocupante.pistas">
								{{pista.nombreTipoInfo}} - {{pista.dato}}
							</li>
						</ul>
					</div>
				</div>
				<ul id="menu" class="nav nav-pills nav-justified">
					<li data-ng-repeat="lugar in paisActual.lugares">
						<a href="#{{lugar.nombreTipoLugar}}" data-toggle="tab"> <img
							src="images/{{lugar.img}}.png" height="100" width="100"> <br>
							{{lugar.nombreTipoLugar}}
						</a>
					</li>
				</ul>
			</div>
			<div class="col-xs-4 right-panel shadow">
				<div class="text-center">
					<h3>Expedientes</h3>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5>Villanos</h5>
						<div class="list-group small infoVillanos">
							<a href="#" class="list-group-item"
								data-ng-repeat="villano in villanos"
								data-ng-click="$parent.villanoSeleccionado=villano"
								data-ng-class="{active:villanoSeleccionado==villano}">
								{{villano.nombre}} 
							</a>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5> - {{villanoSeleccionado.nombre}} - </h5>
						<div  style="position:relative; height: ">
							<div class="buscado" data-ng-show="{{villanoSeleccionado.tieneOrdenDeArresto)}}">
								<a  data-toggle="tooltip" title="Existe una orden de arresto contra {{villanoSeleccionado.nombre}}!"> <img src="images/buscado.png" width="30"> </a>
							</div>
							<div class="identidad">
								<img src="images/{{villanoSeleccionado.sexo}}.png">
							</div>
						</div>
						<button type="button" class="btn btn-default btn-block" 
							data-ng-disabled="villanoSeleccionado==null || orden.responsable != null"
							data-ng-click="emitirOrden()">
							<span class="glyphicon glyphicon-list-alt pull-left"></span> Emitir Orden
						</button>
					</div>
				</div>
				<div class="col-xs-12">
					<h5>Señas Particulares</h5>
					<ul class="list-group small infoExpediente">
						<li class="list-group-item" data-ng-repeat="rasgo in villanoSeleccionado.rasgos">
							{{rasgo.dato}}
							<span class="glyphicon glyphicon-pushpin pull-right"  data-ng-show="true"></span>
					   	</li>
					</ul>
				</div>
				<div class="col-xs-12">
					<h5>Hobbies</h5>
					<ul class="list-group small infoExpediente">
						<li class="list-group-item" data-ng-repeat="hobbie in villanoSeleccionado.hobbies">
							{{hobbie.dato}}
							<span class="glyphicon glyphicon-pushpin pull-right"  data-ng-show="true"></span>
							<!-- villanoSeleccionado.tieneHobbie(hobbie) -->
					   	</li>
					</ul>
				</div>
				<div>
					<div class="col-xs-12">
						<div class="text-center">
							<h3>Aeropuerto</h3>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="text-center">
							<h5>Paises</h5>
						</div>
					</div>
					<div class="col-xs-12">
						<div class="col-xs-6">
							<div class="list-group small infoPaises">
								<a href="#" class="list-group-item"
									data-ng-repeat="nombrePais in paisActual.nombresConexiones"
									data-ng-click="$parent.nombrePaisSeleccionado=nombrePais;actualizarPaisSeleccionado()"
									data-ng-class="{active:nombrePaisSeleccionado==nombrePais}">
									{{nombrePais}} 
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-md-offset-6>">
							<div class="text-center">
								<button type="button" class="btn btn-default btn-block" data-ng-click="retroceder()" data-ng-disabled="paisAnterior==null">
									<span class="glyphicon glyphicon-globe pull-left"></span> Retroceder
								</button>
								<button type="button" class="btn btn-default btn-block" data-ng-click="actualizarPaisSeleccionado();viajar()" data-ng-disabled="nombrePaisSeleccionado==null">
									<span class="glyphicon glyphicon-plane pull-left"></span> Viajar
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- JS -->
			<script src="js/app.js"></script>
			<script src="js/controllers.js"></script>
			<script src="js/ninguno.js"></script>
		</div>
	</div>
</body>

</html>